import { StyleSheet, Dimensions } from 'react-native';
import Theme from '../../../native-base-theme/variables/commonColor';

const headerHeight = 100;
const deviceWidth = Dimensions.get('window').width;
const fontColor = '#ffffff';
const headerPadding = {
  top: 18,
  right: 18,
  bottom: 0,
  left: 18,
};
const headerWidth = deviceWidth - headerPadding.left - headerPadding.right;

const styles = StyleSheet.create({
  tabBarUnderlineStyle: {
    backgroundColor: '#4465e1',
    height: 2,
  },
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  headerContainer: {
    paddingLeft: headerPadding.left,
    paddingTop: headerPadding.top,
    paddingRight: headerPadding.right,
    paddingBottom: headerPadding.bottom,
  },
  headerTitle: {
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  backIcon: {
    width: 24,
  },
  headerText: {
    color: fontColor,
    fontWeight: 'bold',
  },
  rightOperate: {
    width: 24,
  },
  headerInfo: {
    width: headerWidth,
    display: 'flex',
    flexDirection: 'row',
    height: headerHeight,
    paddingTop: 10,
  },
  imageCls: {
    width: 80,
    height: headerHeight - 20,
    borderRadius: 5,
  },
  deviceStatus: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: headerWidth - 80,
    alignItems: 'center',
  },
  otherSimpleInfo: {
    height: headerHeight - 20,
    paddingLeft: 8,
    color: fontColor,
  },
  colorWhite: {
    color: fontColor,
  },
  tabContent: {
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  btnText: {
    textAlign: 'center',
    color: '#ffffff',
    paddingTop: 15,
    paddingBottom: 15,
  },
  operationBtns: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  acceptBtn: {
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  changeBranch: {
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  cancle: {
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  sendBack: {
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  complete: {
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  returned: {
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  checkAndAccept: {
    flex: 1,
    backgroundColor: Theme.myPrimary,
  },
  badge: {
    borderWidth: 1,
    borderColor: '#207aff',
    backgroundColor: Theme.myPrimary,
    height: 20,
    marginLeft: 10,
    marginTop: 3,
    padding: 10,
  },
  changeTitleContainer: {
    marginTop: 15,
    marginLeft: 10,
    marginRight: 10,
    backgroundColor: 'rgba(255, 255, 255 ,0.2)',
    borderRadius: 5,
    padding: 10,
    position: 'relative',
  },
  changeTitleHeader: {
    color: '#ffffff',
    fontSize: 20,
  },
  changeTitleContent: {
    display: 'flex',
    flexDirection: 'row',
    flex: 1,
    flexWrap: 'wrap',
  },
  changeTitleContentItem: {
    color: '#a4a4a4',
    fontSize: 13.5,
  },
  itemLeft: {
    marginRight: 10,
  },
  selectStyles: {
    width: 25,
    height: 25,
    position: 'absolute',
    right: 5,
    top: '45%',
    transform: [
      {
        rotate: '-90deg',
      },
    ],
  },
  selectStylesIcon: {
    width: 18,
    color: '#a4a4a4',
  },
});


export default styles;
